<template>
    <view class="flex flex-col items-center overflow-hidden">
        <nut-swipe>
            <view class="license-plate-wrapper" :style="getPlateTypeBgStyle">
                <view class="license-plate" :style="getPlateTypePlateStyle">
                    <view class="top-holes"></view>
                    <view class="plate-text" :style="getPlateTypeTextStyle">{{
                        formatLicensePlate(plateNumber)
                    }}</view>
                    <view class="bottom-holes"></view>
                </view>
            </view>
            <view class="w-full mt-2 flex justify-between items-center">
                <view class="text-sm text-gray-400">出行时间：{{ props.licenseInfo.time }}</view>
                <view class="text-sm text-gray-400">左滑操作</view>
            </view>
            <template #right>
                <view class="px-4 h-28 flex justify-center items-center">
                    <view
                        class="w-8 h-8 flex justify-center items-center rounded-full bg-blue-500"
                        @click="handleEdit"
                    >
                        <Edit color="#fff" />
                    </view>
                    <view
                        class="ml-4 w-8 h-8 flex justify-center items-center rounded-full bg-red-500"
                        @click="handleDelete"
                    >
                        <Del2 color="#fff" />
                    </view>
                </view>
            </template>
        </nut-swipe>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatLicensePlate } from '@/utils/filters'
import { Edit, Del2 } from '@nutui/icons-vue-taro'

const props = defineProps({
    licenseInfo: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['delete'])

const plateNumber = computed(() => {
    return props.licenseInfo?.license || ''
})

const plateType = computed(() => {
    return plateNumber.value.length >= 8 ? 'NEW_ENERGY_CAR' : 'OIL_CAR'
})

const getPlateTypeBgStyle = computed(() => {
    return {
        background:
            plateType.value === 'NEW_ENERGY_CAR'
                ? 'linear-gradient(180deg, #ffffff 0%, #1D9634 100%)'
                : '#053DC1'
    }
})

const getPlateTypePlateStyle = computed(() => {
    return {
        border: plateType.value === 'NEW_ENERGY_CAR' ? '2px solid #000000' : '2px solid #FFFFFF'
    }
})

const getPlateTypeTextStyle = computed(() => {
    return {
        color: plateType.value === 'NEW_ENERGY_CAR' ? '#000' : '#fff'
    }
})

const handleEdit = () => {
    emit('edit')
}

const handleDelete = () => {
    emit('delete')
}
</script>

<style lang="less">
.license-plate-wrapper {
    width: 686px;
    padding: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #1d9634 100%);
    border-radius: 16px;

    .license-plate {
        width: 686px;
        height: 200px;
        border-radius: 12px;
        border: 4px solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        box-sizing: border-box;

        // 上方两个孔
        .top-holes {
            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 48px;
                height: 12px;
                background-color: #fff;
                border-radius: 12px;
                top: 8px;
            }
            &::before {
                left: 139px;
            }

            &::after {
                right: 139px;
            }
        }

        // 下方两个孔
        .bottom-holes {
            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 48px;
                height: 12px;
                background-color: #fff;
                border-radius: 12px;
                bottom: 8px;
            }
            &::before {
                left: 139px;
            }

            &::after {
                right: 139px;
            }
        }

        .plate-text {
            font-size: 100px;
            color: #000;
            font-weight: bold;
            letter-spacing: 8px;
        }
    }
}
</style>
